<template>
  <div>
    <a-row :gutter="12" >
      <!-- <a-col  :sm="12" :lg="8" :xxl="4" class="col-margin">
        <div class="box">
          <div class="title">
            <p>园区环境</p>
          </div>
          <div class="main">
            <img src="../../assets/analysis-img/u45.png" alt="">
            <p>优</p>
          </div>
          <div class="footer">
            <span>2℃~8℃</span>
            <span>多云</span>
            <span>良</span>
            <span>南风3~4级</span>
          </div>
        </div>
      </a-col> -->
      <a-col  :sm="12" :lg="8" :xxl="5" class="col-margin">
        <div class="box">
          <div class="title">
            <p>人均户外运动量</p>
          </div>
          <div class="main">
            <img src="../../assets/analysis-img/u46.png" alt="">
            <p class="sports">{{ info.avgAmount || '--' }} J</p>
          </div>
          <div class="footer">
            <span>人均户外时长：{{ info.avgDuration || '--' }} </span>
            <span>人均户外步数：{{ info.avgStepNumber || '--' }} </span>
          </div>
        </div>
      </a-col>
      <a-col :md="12" :sm="12" :lg="8" :xxl="5" class="col-margin">
        <div class="box">
          <div class="title">
            <p >入睡时长</p>
          </div>
          <div class="main">
            <img src="../../assets/analysis-img/u48.png" alt="">
            <p class="sleep">{{ info.avgSleepDuration || '--' }} mins</p>
          </div>
          <div class="footer">
            <span>人均喝水次数：{{ info.avgDrinkCount || '--' }} </span>
            <span>人均如厕次数：{{ info.avgToiletCount || '--' }} </span>
          </div>
        </div>
      </a-col>
      <a-col  :sm="12" :lg="8" :xxl="4" class="col-margin">
        <div class="box">
          <div class="title">
            <p>出勤率</p>
          </div>
          <div class="main">
            <img src="../../assets/analysis-img/u47.png" alt="">
            <p  class="trun-out">{{ info.rate || '--' }} %</p>
          </div>
          <div class="footer">
            <span>实到：{{ info.actualArrival  || '--'}} </span>
            <span>请假：{{ info.absence  || '--'}} </span>
          </div>
        </div>
      </a-col>
      <a-col :md="12" :sm="12" :lg="8" :xxl="5" class="col-margin">
        <div class="box">
          <div class="title">
            <p >体温异常</p>
          </div>
          <div class="main" style="cursor: pointer;" @click="viewTemperatureTable">
            <img src="../../assets/analysis-img/u44.png" alt="">
            <p class="temperature" style="color:#FFC005">{{ info.abnormalTemperatureNum || '--' }} 人</p>
          </div>
          <div class="footer">
            <span>未测人数：{{ info.noTemperatureNum || '--' }} </span>
            <span>实测人数：{{ info.actualTemperatureNum || '--' }} </span>
          </div>
        </div>
      </a-col>
      <a-col :md="12" :sm="12"  :lg="8" :xxl="5" class="col-margin">
        <div class="box">
          <div class="title">
            <p>室内区域时长</p>
          </div>
          <div class="main">
            <img src="../../assets/analysis-img/u49.png" alt="">
            <p class="area">{{ info.avgIndoorDuration  || '--'}} mins</p>
          </div>
          <div class="footer">
            <span>室内TOP1：{{ info.indoorAreaTop1 || '--' }} </span>
            <span>室外TOP1：{{ info.outdoorAreaTop1 || '--' }} </span>
          </div>
        </div>
      </a-col>
    </a-row>
    <temperature-table ref="TemperatureTable"></temperature-table>
  </div>
</template>

<script>
import TemperatureTable from "./modules/TemperatureTable.vue";
import { getAction } from '@/api/manage.js'
export default {
  name: 'Analysis',
  components: {
    TemperatureTable
  },
  data() {
    return {
      url: 'management/skStudent/getControlBoard',
      info:{}
    }
  },
  computed:{
    cardHeadStyle(){
      return {
        color:"#999999"
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      getAction(this.url).then(res => {
        console.log('dash', res);
        if (res.result) {
          this.info = res.result;
          this.info.rate = (this.info.rate * 100).toFixed(2)
        }
      })
    },
    // 查看体温异常人数表格
    viewTemperatureTable(){
      this.$refs.TemperatureTable.init();
    }
  }
}
</script>
<style scoped lang="less">
@bordr-color:#e8e8e8;
@bg-url:"../../assets/analysis-img";
.col-margin{
  margin-bottom:12px ;
}
  .box{
    border:1px solid @bordr-color;
    background-color: #fff;
    p{
      margin-bottom: 0;
    }
    .title{
      color: #999;
      font-size: 16px;
      & > p{
        padding:15px;
        padding-bottom: 0;
      }
    }
    .main{
      display: flex;
      align-items: center;
      justify-content: center;
      padding:10px 0;
      border-bottom: 1px solid @bordr-color;
      & > p{
        color: #33B6A4;
        padding-left:12px;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .footer{
      display: flex;
      justify-content: space-between;
      padding:7px 15px;
      span{
        font-size: 13px;
      }
    }
  }
</style>
